<?php

/* @var $this yii\web\View */

$this->title = Yii::t('app', 'Classifies');
$this->params['breadcrumbs'][] = $this->title;
?>
<div id="app">
</div>
<? $this->beginBlock('otherJs') ?>
<?= $this->render('/jstemplate/validate') ?>
<?= $this->render('/jstemplate/left_drawer') ?>
<?= $this->render('/jstemplate/search_form') ?>
<?= $this->render('/jstemplate/notify') ?>
<script type="text/x-template" id="app-template">
    <v-app>
        <notify></notify>
        <left-drawer ref="left_drawer"></left-drawer>

        <v-main>
            <v-app-bar
                    elevation="0"
                    color="primary"
                    dark
                    app
            >
                <v-toolbar-title><?= Yii::t('app', 'Classifies') ?></v-toolbar-title>
                <v-spacer></v-spacer>

                <v-app-bar-nav-icon @click="openDrawer"></v-app-bar-nav-icon>

                <template v-slot:extension>
                    <search-form v-if="filterData != null" :filterData="filterData" @search="search">
                    </search-form>
                </template>
            </v-app-bar>
            <v-card :loading="loading">

                <v-container>
                    <v-btn
                            color="primary"
                            outlined
                            @click="onCreateItem()"
                    >
                        <?= Yii::t('app', 'Create Classify') ?>
                    </v-btn>
                    <v-data-table
                            :headers="headers"
                            :items="desserts"
                            :options.sync="options"
                            :server-items-length="totalDesserts"
                            :loading="loading"
                    >
                        <template v-slot:item.actions="{ item }">
                            <v-btn
                                    color="primary"
                                    outlined
                                    small
                                    @click="onUpdateItem(item)"
                            >
                                编辑
                            </v-btn>
                            <v-btn
                                    color="accent"
                                    outlined
                                    small
                                    @click="onDeleteItem(item.id)"
                            >
                                删除
                            </v-btn>

                        </template>
                    </v-data-table>

                </v-container>

            </v-card>

        </v-main>
        <v-dialog v-model="deleteOpen" max-width="290">
            <v-card>
                <v-card-title class="headline">
                    确定删除?
                </v-card-title>
                <v-card-text>删除分类可能导致所使用的分类失效</v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                            color="primary"
                            text
                            @click="deleteItem"
                    >
                        立即删除
                    </v-btn>
                    <v-btn
                            color="grey"
                            text
                            @click="deleteOpen = false"
                    >
                        取消
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="createOpen" max-width="290">
            <v-card>
                <v-card-title class="headline">
                    {{ change_label}}
                </v-card-title>
                <v-container>

                    <v-text-field
                            v-model="handForm.name"
                            label="<?= Yii::t('app', 'Name') ?>"
                            single-line
                            hide-details
                    ></v-text-field>
                </v-container>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                            color="primary"
                            text
                            @click="createItem"
                    >
                        提交
                    </v-btn>
                    <v-btn
                            color="grey"
                            text
                            @click="createOpen = false"
                    >
                        取消
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-snackbar
                v-model="snackbarOpen"
        >
            {{ snackbarText }}

            <template v-slot:action="{ attrs }">
                <v-btn
                        color="blue"
                        text
                        v-bind="attrs"
                        @click="snackbarOpen = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>
    </v-app>
</script>
<script>
    new Vue({
        el: '#app',
        vuetify: vuetify,
        data: function () {
            return {
                page: 1,
                lastPage: 1,
                loading: false,
                selectId: 0,
                createOpen: false,
                filterData: null,
                filterResult: null,
                deleteOpen: false,
                totalDesserts: 0,
                options: {},
                headers: [
                    {text: '<?=Yii::t('app', 'Id')?>', value: 'id', sortable: false},
                    {text: '<?=Yii::t('app', 'Name')?>', value: 'name', sortable: false},
                    {text: '操作', value: 'actions', sortable: false},
                ],
                desserts: [],
                snackbarOpen: false,
                snackbarText: '',
                isCreate: false,
                handForm: {
                    id: 0,
                    name: '',
                }
            }
        },
        watch: {
            options: {
                handler() {
                    this.getDataFromApi()
                },
                deep: true,
            },
        },
        computed: {
            change_label: function () {
                if (this.handForm.id == 0) {
                    return '<?=Yii::t('app', 'Create Classify')?>'
                } else {
                    return '<?=Yii::t('app', 'Update Classify')?>';
                }
            }
        },
        mounted() {
            let vue = this
            http.get("classifies/configs").then(function (response) {
                vue.filterData = response.data
            })
            this.getDataFromApi()
        },
        methods: {
            search(filter) {
                console.log(filter)

                this.page = 1;
                this.filterResult = filter;
                this.getDataFromApi()
            },
            reset() {
                window.location.href = window.location.href
            },
            getDataFromApi() {
                let vue = this;
                if (vue.loading) {
                    return;
                }

                vue.loading = true

                const {sortBy, sortDesc, page, itemsPerPage} = vue.options

                let params = {
                    page: page,
                    sort: sortDesc[0] + sortBy[0],
                    'per-page': itemsPerPage,
                };

                if (vue.filterResult) {
                    params['filter'] = vue.filterResult
                }

                http.get("classifies", {
                    params: params,
                    paramsSerializer: function (params) {
                        return Qs.stringify(params, {arrayFormat: 'indices'})
                    },
                }).then(function (response) {
                    let ret = response.data;
                    vue.desserts = response.data;
                    vue.totalDesserts = parseInt(response.headers['x-pagination-total-count']);
                    vue.lastPage = parseInt(response.headers['x-pagination-page-count']);
                    vue.loading = false
                    console.log(ret);
                })
            },
            onCreateItem(parentItem) {
                let vue = this;
                vue.handForm.id = 0;
                vue.handForm.name = '';
                vue.createOpen = true;
            },
            onUpdateItem(item) {
                let vue = this;
                vue.handForm.id = item.id;
                vue.handForm.name = item.name;
                vue.createOpen = true;
            },
            createItem() {
                let vue = this;
                if (vue.handForm.id === 0) {
                    http.post("classifies", http.param(vue.handForm)).then(function (response) {
                        vue.changeResult('<?=Yii::t('app', 'Create Success')?>')
                    }).catch(vue.handleError)
                } else {
                    http.patch("classifies/" + vue.handForm.id, http.param(vue.handForm)).then(function (response) {
                        vue.changeResult('<?=Yii::t('app', 'Update Success')?>')
                    }).catch(vue.handleError)
                }
            },
            onDeleteItem(id) {
                this.selectId = id;
                this.deleteOpen = true;
            },
            deleteItem() {
                this.deleteOpen = false;
                let vue = this;
                http.delete("classifies/" + vue.selectId).then(function (response) {
                    vue.snackbarText = '<?=Yii::t('app', 'Delete Success')?> ';
                    vue.snackbarOpen = true;
                    vue.getDataFromApi();
                })
            },
            changeResult(msg) {
                this.snackbarText = msg;
                this.snackbarOpen = true;
                this.createOpen = false;
                this.search();
            },
            handleError(error) {
                if (error.response.status == 422) {
                    console.log(error.response);
                    this.snackbarText = error.response.data[0].message;
                    this.snackbarOpen = true;
                }
                return Promise.reject(error);
            },
            openDrawer() {
                this.$refs.left_drawer.toggleLeftDrawerVisible()
            },
        },
        template: '#app-template'
    })
</script>
<?= $this->endBlock() ?>
